<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <t-input filled v-model="color" class="my-input">
        <template v-slot:append>
          <t-icon name="colorize" class="cursor-pointer">
            <t-popup-proxy
              cover
              transition-show="scale"
              transition-hide="scale"
            >
              <t-color v-model="color" />
            </t-popup-proxy>
          </t-icon>
        </template>
      </t-input>

      <t-input
        filled
        v-model="secondColor"
        :rules="['anyColor']"
        hint="With validation"
        class="my-input"
      >
        <template v-slot:append>
          <t-icon name="colorize" class="cursor-pointer">
            <t-popup-proxy
              cover
              transition-show="scale"
              transition-hide="scale"
            >
              <t-color v-model="secondColor" />
            </t-popup-proxy>
          </t-icon>
        </template>
      </t-input>
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        color: ref('#FF00FF'),
        secondColor: ref('#027be3'),
      };
    },
  };
</script>

<style lang="sass" scoped>
  .my-input
    max-width: 250px
</style>
